<template>
	<view>
		<TopHead :title="'商户列表'" :fhShow="flasa"></TopHead>
		<view class="conbox">
			<swiper class="index-section-swiper" :indicator-dots="true" indicator-color="#BFCFFD"
				indicator-active-color="#CF712B" circular>
				<swiper-item class="swiper-item" v-for="(item,index) in bannerList" :key="index">
					<image :src="path+item.filePath" mode="" class="cell-icon"></image>
				</swiper-item>

			</swiper>
			<goods-list :list="list"></goods-list>
		</view>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	import GoodsList from '../../components/basics/goodsList.vue';
	export default {
		components: {
			TopHead,
			GoodsList
		},
		data() {
			return {
				path: this.$http.tpUrl + '/', // 图片前缀
				goodsList: [],
				latitude: 0, // 纬度
				longitude: 0, // 经度
				page: 1,
				pageSize: 20, // 
				total: 0, // 总数
				list: [], // 列表
				productType:'', // 
				bannerList:[], // bannerlist
			}
		},
		onLoad(options) {
			console.log(options)
			this.getBannerData()
		},
		onShow() {
			let productType = uni.getStorageSync('productType') || ''
			if (productType) {
				console.log(productType)
				this.productType = productType
			}
			this.page = 1
			this.total = 0
			this.list = []
			this.toLocation()
			// this.initData()
		},
		onHide() {
			console.log('隐藏了商户列表')
			uni.removeStorageSync('productType');
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			if (this.total > this.list.length) {
				this.page = parseInt(this.page) + 1
				this.$nextTick(()=>{
					this.initData()
				})
			}
		},
		methods: {
			// 顶部banner
			getBannerData(){
				let _this = this;
				let userId = uni.getStorageSync('id')
				let data = {
					classify: 7, // 类型（1：引导页，2：首页，3：首页广告1，4：首页广告2，5：首页广告3，6：首页导航，7：商户列表banner）
					userId: userId,
					 
				}
				_this.$http.fetchData({
					url: '/wechatApplet/customer/banner/',
					method: 'GET',
					data: data,
					success(res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
						_this.bannerList = res.data.list
				
					}
				})
			},
			// 获取经纬度
			toLocation() {
				let _this = this
				// let locations = this.info.serviceOrderInfo.locations
				// locations = locations.split(',')
				// console.log(locations)
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = res.latitude; // 纬度
						const longitude = res.longitude; // 经度
						_this.latitude = latitude
						_this.longitude = longitude
						console.log(res)
						_this.initData()
					}
				});
			},
			// 数据请求示例
			initData() {
				let _this = this;
				let userId = uni.getStorageSync('id')
				let data = {
					page: _this.page,
					pageSize: _this.pageSize,
					userId: userId,
					longitude: _this.longitude,
					latitude: _this.latitude,
					productType: _this.productType
				}
				_this.$http.fetchData({
					url: '/wechatApplet/customer/store/',
					method: 'GET',
					data: data,
					success(res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
						_this.list = [..._this.list, ...res.data.list]
						_this.total = res.data.total

					}
				})
			},
			// dianhua
			phoneCall(item) {
				uni.makePhoneCall({
					phoneNumber: '023-62433333' //仅为示例
				});
			},


		}
	}
</script>

<style scoped>
	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.headBox .wzText {
		line-height: 56rpx;
	}

	.conbox {
		padding: 30rpx;
		padding-top: 240rpx;
	}

	.index-section-swiper {
		width: 690rpx;
		height: 346rpx;
		margin-bottom: 30rpx;
	}

	.swiper-item {
		width: 690rpx;
		height: 346rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.swiper-item image {
		width: 690rpx;
		height: 346rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
</style>